<template>
	<!-- 我的钱包页面 -->
	<div class="demo">
		<van-nav-bar title="我的钱包" left-arrow @click-left="onClickLeft()">
			<van-icon name="search" slot="right" size="20px" />
		</van-nav-bar>

		<div class="Total-assets-and-accumulated-recharge-and-accumulated-consumption">
			<div class="My-wallet-control-layer">
				<div class="item" v-for="(item, index) in property" :key="index">
					<div class="title">{{ item.title }}</div>
					<div class="price">{{ item.price }}</div>
				</div>
			</div>
		</div>
		<!-- 充值套餐 -->
		<div class="Prepaid-phone-plans">
			<div class="Top-up-program">
				<div class="program" v-for="(item, index) in combo" :key="index">
					<div class="leftProgram">
						<van-icon name="shop-o" />
						<span class="Prepaid-phone-information">{{ item.message }}</span>
					</div>
					<div class="rightProgram" @click="onClicktopUp(item)">充值</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { usertopUp } from "../api/api";
import { Toast } from "vant";
export default {
	name: "Burse",
	components: {},
	data() {
		return {
			combo: [
				{
					message: "充值￥ 100 赠送￥ 10",
					recharge: 100,
					give: 10
				},
				{
					message: "充值￥ 200 赠送￥ 20",
					recharge: 200,
					give: 20
				},
				{
					message: "充值￥ 300 赠送￥ 30",
					recharge: 300,
					give: 30
				},
				{
					message: "充值￥ 400 赠送￥ 40",
					recharge: 400,
					give: 40
				},
				{
					message: "充值￥ 500 赠送￥ 50",
					recharge: 500,
					give: 50
				}
			]
		};
	},
	computed: {
		...mapState("MobilePhone", ["Consumption", "Recharge", "usertatol", "UserId"]),

		property() {
			const data = [
				{
					title: "总资产",
					price: this.usertatol
				},
				{
					title: "累计充值",
					price: this.Recharge
				},
				{
					title: "累计消费",
					price: this.Consumption
				}
			];

			return data;
		}
	},
	mounted() {
		console.log(this);
	},
	methods: {
		onClickLeft() {
			this.$router.go(-1);
		},
		async onClicktopUp(el) {
			if (!this.UserId) return Toast(`请先登录`);
			const { recharge, give } = el;
			let res = await usertopUp(recharge, give, this.UserId);

			if (res) {
				this.userBalance(this.UserId);
				Toast(`充值成功`);
			} else {
				Toast(`充值失败`);
			}
		},

		...mapActions("MobilePhone", ["userBalance"])
	}
};
</script>
<style lang="less" scoped>
.demo {
	.Total-assets-and-accumulated-recharge-and-accumulated-consumption {
		width: 100%;
		padding-top: 7px;
		.My-wallet-control-layer {
			margin: auto;
			width: 90%;
			height: 70px;
			background-color: #1d0e07;
			color: #f79c2f;
			border-radius: 7px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.item {
				// width: 40px;
				height: 70%;

				display: flex;
				flex-wrap: wrap;
				text-align: center;
				align-content: space-between;
				box-sizing: border-box;
				.title {
					width: 100%;
				}
				.price {
					width: 100%;
				}
			}
		}
	}
	.Prepaid-phone-plans {
		width: 100%;
		padding-top: 7px;
		.Top-up-program {
			width: 90%;
			background-color: white;
			margin: auto;
			border-radius: 7px;
			.program {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 45px;
				padding: 0 20px 0;
				.leftProgram {
					font-size: 13px;
					.Prepaid-phone-information {
						margin-left: 5px;
					}
				}
				.rightProgram {
					background: rgb(233, 28, 28);
					color: white;
					padding: 3px 15px;
					border-radius: 20px;
				}
			}
		}
	}
}
</style>
